{block name=body}
{* Define the function *} {function name=options_list level=0} 
	{foreach $opts as $opt}
		{if $level eq 0}
			<optgroup label="{$opt.value}">
		{else}
			<option value="{$opt.id}" {if $selected eq $opt.id}selected="selected"{/if}>{$opt.value}</option>
		{/if}
		{if count($opt.subs) > 0} {call name=options_list opts=$opt.subs level=$level+1 } {/if} 
	{/foreach} 
{/function}

<div id="partycont">
	<div class="container">
		<div class="row">
			<div class="col-sm-12">
					 {include file='breadcrumbs.tpl'}
			</div>
		</div>
		<div class="row">
			<div class="col-sm-8">
	  			<h1 class="title" id="partytitle">{$listing_name}</h1>
				  {$listing_content1}			
			</div>
			<div class="col-sm-4 hidden-xs">
  				<img src="/images/franchisekid.png" alt="" class="img-responsive padtop" />
			</div>
		</div>
	</div>
</div>
	
<div class="container pagecont">	
		<div class="row">
			<div id="maintext" class="col-sm-12">
				{$listing_content2}
			</div>
		</div>
</div>

<div class="bluebg">
	<div class="container">
		<div class="row">
			<div class="col-sm-12">
				{$listing_content3}
			</div>
		</div>
	</div>
</div>

<div class="container pagecont">
		<div class="row">
			<div class="col-sm-12">
				{$listing_content4}
			</div>
		</div>
	</div>

<div id="enroltrialhead">
	<div class="container">
		<div class="row">
			<div class="col-sm-12 text-center"><a name="franchiseform"></a>
				{$lang.franchises.enquire}
			</div>
		</div>
	</div>
</div>

<div id="enroltrialmain">
	<div class="container">
		<div class="row">
			<div class="col-sm-8 col-sm-offset-2">
			<div class="row">
				{if $error}
					<div id="error" class="alert alert-danger fade in text-center">
						<button class="close" aria-hidden="true" data-dismiss="alert" type="button">&times;</button>
						<strong class="text-danger">{$error}</strong>
					</div>
				{/if}
			<form id="franchise_form"  method="post" action="/process/contact-us" novalidate="novalidate">
				<div class="col-sm-6 form-group">
						<label for="name">{$lang.contact.name}</label>
						<input type="text" id="name" name="name" value="{if $post}{$post.name}{else}{$user.gname} {$user.surname}{/if}" required />
					</div>
				
				<div class="col-sm-6 form-group">
						<label for="email">{$lang.contact.email}</label>
						<input type="email" id="email" name="email" value="{if $post}{$post.email}{else}{$user.email}{/if}" required />
					</div>

				<div class="col-sm-6 form-group">
						<label for="phone">{$lang.contact.phone}</label>
						<input type="text" id="phone" name="phone" value="{if $post}{$post.phone}{else}{$address.S.address_telephone}{/if}" required />
					</div>
					{*<div class="col-sm-6 form-group">*}
						{*<label for="postcode">{$lang.contact.postcode}</label>*}
						{*<input type="text" id="postcode" name="postcode" value="{if $post}{$post.postcode}{else}{$address.S.address_postcode}{/if}" pattern="[0-9]"  />*}
					{*</div>*}
				<div class="col-sm-6 form-group">
					<label for="package">{$lang.franchises.region}</label>
					<input type="text" id="region" name="region" value="{if $post}{$post.region}{/if}"  />
				</div>
				<div class="col-sm-2 form-group">
					<label for="state">{$lang.contact.province_copy}</label>
					<!-- <input type="text" value="{if $post}{$post.state}{else}{$user.state}{/if}" id="state" name="state" required /> -->
					<select id="state" name="address_state" class=" form-control">
						<option value="">请选择</option>
						{foreach $states as $state }
							<option value="{$state.value}" {if $address && $address.S.address_state eq $state.value}selected="selected" {/if}>{$state.value}</option>
						{/foreach}
					</select>
				</div>
				<div class="col-sm-2 form-group">
					<label for="suburb">{$lang.contact.city_copy}</label>
					<select id="suburb" name="address_suburb" class="shipping-select-req  form-control">
						<option value="">请选择</option>
					</select>
				</div>
				<div class="col-sm-2 form-group">
					<label for="country">{$lang.contact.country_copy}</label>
					<select id="country" name="address_country" class="shipping-select-req  form-control">
						<option value="">请选择</option>
					</select>
				</div>
				<div class="col-sm-6 form-group" id="hearcont">
					<label for="hearabout">{$lang.contact.hear}</label>
					<div>
						<select id="hearabout" tabindex="0" class="required" name="hear_about_us">
							<option value="">{$lang.contact.select}</option>
							{if $post}{assign var='selected' value=$post.hear_about_us}{else}{assign var='selected' value=$user.user_hearabout}{/if}
							{call name=options_list opts=$hearabout selected=$selected}
						</select>
					</div>
				</div>
					<div class="col-sm-12 form-group">
						<label for="enquiry">{$lang.contact.enquiry}</label>
						<textarea id="enquiry" name="enquiry" >{if $post}{$post.enquiry}{/if}</textarea>
					</div>
		
					<div class="col-sm-12 form-group hide">
						<input type="text" id="additional" name="additional" value="" >
						<input type="hidden" id="reference_page" name="reference_page" value="{$listing_name}" >
						<input type="hidden" id="reference_page_objid" name="reference_page_objid" value="{$listing_object_id}" >
						<input type="hidden" id="token" name="formToken" value="{$token}" >
					</div>
					
					<div class="col-sm-12">
						<button class="enquire" onclick="" type="submit"><span>{$lang.franchises.submit}</span></button>
					</div>
					
			</form>
			</div>
			
			</div>
		</div>
	</div>
</div>

{include file='helpblock.tpl'}

{/block}

{block name=tail}
<script type="text/javascript" src="/includes/js/responsive-tabs.js"></script>
<script type="text/javascript">
$(function(){
			$('select').selectBoxIt();
});	
	
$(document).ready(function(){

	 	$('#franchise_form').validate();
	 	
	 	$('#postcode').rules("add", {
			digits: true,
			minlength: 4
		});

	 	$('#email').rules("add", {
			email: true
		});


	fakewaffle.responsiveTabs(['xs']);
	$('select').selectBoxIt();

	var oProvince = $("select#state");
	var oCity = $("select#suburb");
	var oCountry = $("select#country");

	var city = function(){
		var n = oProvince.get(0).selectedIndex;
		var id = oProvince.find("option:selected").val();
		$.ajax({
			url: "/process/regionsuburbs",
			dataType: "json",
			data: {
				name: id,
				type:"suburb"
			},
			success: function( data ) {
				oCity.data("selectBox-selectBoxIt").remove();
				oCity.data("selectBox-selectBoxIt").add(data);
				{if $address && $address.S.address_suburb}
				oCity.data("selectBox-selectBoxIt").selectOption("{$address.S.address_suburb}");
				{/if}
				//district();
			}
		});
	}

	var district = function(){
		var n = oCity.get(0).selectedIndex;
		var id = oCity.find("option:selected").val();
		$.ajax({
			url: "/process/regionsuburbs",
			dataType: "json",
			data: {
				name: id,
				type:"country"
			},
			success: function( data ) {
				oCountry.data("selectBox-selectBoxIt").remove();
				oCountry.data("selectBox-selectBoxIt").add(data);
				{if $address && $address.S.address_country}
				oCountry.data("selectBox-selectBoxIt").selectOption("{$address.S.address_country}");
				{/if}
			}
		});
	}

	city();
	oProvince.change(function(){
		city();
	});

	oCity.change(function(){
		district();
	});

	$('#update-pass-form').validate();
	$('#update-details-form').validate();

	$('.student-forms').each(function() {
		$(this).validate();
	});

	var setTab = window.location.hash;
	if (setTab == '#notice' || setTab == '#error') $('#account-tab a[href="#password"]').tab('show');
	if (setTab == '#enrolments') $('#account-tab a[href="#enrolments"]').tab('show');
	if (setTab == '#orders') $('#account-tab a[href="#orders"]').tab('show');
	if (setTab == '#contact') $('#account-tab a[href="#contact"]').tab('show');
	if (setTab == '#student') $('#account-tab a[href="#student"]').tab('show');
	if (setTab == '#password') $('#account-tab a[href="#password"]').tab('show');
 	  
});
</script>
{/block}
